<template>
    <div>
      <h1>绑定样式</h1>
      <div
        :style="{
          'background-color': pink,
          border: '2px solid pink',
          width: width,
          height: height + 'px'
        }"
      >
        <div
          :style="{
            backgroundColor: isblue ? blue : 'black',
            width: '50px',
            height: '20px'
          }"
        ></div>
        <div :style="mydiv"></div>
        <button @click="isblue = !isblue">blue切换</button>
        111
      </div>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  const pink = "pink";
  const width = "200px";
  const height = "100px   ";
  const mydiv = {
    width: "50px",
    height: "100px",
    background: "blue"
  };
  const isblue = ref(true);
  const blue = "blue";
  </script>
  <style></style>
  